<template>
  <div id="pie" style="height: 100%; width: 100%"></div>
</template>

<script>
import * as echarts from "echarts";
import pieData from "../../assets/json/emotion_analysis.json";
import { onMounted, reactive, watch } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const data = reactive(pieData);

    watch(
      () => store.state.title,
      (newTitle) => {
        if (newTitle) {
          pie(newTitle);
        }
      }
    );

    onMounted(() => {
      pie(store.state.title);
    });

    pie("total");

    function pie(po) {
      const poemKeys = Object.keys(data);
      // console.log(poemKeys);
      poemKeys.forEach((key) => {
        if (po == key) {
          drawPie(key, data[key]);
        }
        else{
            
            // console.log(typeof(po));
        }
      });
    }

    function drawPie(poem, data) {
      let pie = echarts.init(document.getElementById("pie"));
      const colors = [
        "#899790",
        "#60715f",
        "#b6976e",
        "#a7a18c",
        "#d6bba2",
        "#878876",
        "#a87c6c",
      ];

      const seriesData = Object.keys(data).map((name, index) => {
        return {
          value: data[name],
          name: name,
          itemStyle: {
            color: colors[index % colors.length],
          },
        };
      });

      const option = {
        title: {
          text: poem,
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        toolbox: {
          show: true,
          feature: {
            restore: {
              show: true,
              title: "Reset",
            },
          },
          right: 20,
          top: 5,
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              color: "#000", // 将文字颜色设置为黑色
              lineStyle: {
                color: "#000", // 将文字旁边线的颜色设置为黑色
              },
            },
            data: seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      pie.setOption(option);
    }
  },
};
</script>

<style>
</style>